<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
>
<head>
    <meta charset="utf-8">
    <title>图书信息管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="/resources/layui/css/layui.css"/>
    <link rel="stylesheet" href="/resources/layui/layui-ext/dtree/dtree.css">
    <link rel="stylesheet" href="/resources/layui/layui-ext/dtree/font/dtreefont.css">

</head>
<body>

<table id="menuTable" lay-filter="menuTable"></table>

<!--toolbar开始-->
<div id="tableToolbar" style="display: none;">
    <button type="button" class="layui-btn" lay-event="add">添加</button>
    <!--<button type="button" class="layui-btn layui-btn-danger" lay-event="batchDelete">批量删除</button>-->
</div>
<div id="cellToolbar" style="display: none;">
    <button type="button" class="layui-btn layui-btn-sm layui-btn-xs" lay-event="update">修改</button>
    <button type="button" class="layui-btn layui-btn-danger layui-btn-sm layui-btn-xs" lay-event="delete">删除
    </button>
</div>
<!--toolbar结束-->

<!--添加修改弹出层开始-->
<form class="layui-form" id="addForm" lay-filter="addForm" action="" style="display: none;padding: 20px">

    <div class="layui-form-item">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-block">
            <input type="text" id="title" name="title" required lay-verify="required" autocomplete="off"
                   placeholder="请输入标题"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">内容</label>
        <div class="layui-input-block">
            <input type="text" id="content" name="content" autocomplete="off"
                   placeholder="请输入内容"
                   class="layui-textarea">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">作者</label>
        <div class="layui-input-block">
            <!--<textarea class="layui-textarea" id="remark" name="remark" style="display: none"></textarea>-->
            <textarea name="author" id="author" placeholder="请输入作者" class="layui-input"></textarea>
        </div>
    </div>
    <div class="layui-input-block">
        <button type="submit" class="layui-btn" id="release" lay-submit="" lay-filter="release">保存</button>
        <button type="button" class="layui-btn layui-btn-danger" id="cancel">取消</button>
    </div>
</form>
<!--添加修改弹出层结束-->

<!--看帖弹出层-->
<div id="lookTopic" style="display: none;align-content: center">
    <h3 id="h1look"></h3>
    <h4 id="h3content"><b>正文: </b><span id="spancontent"></span></h4>
    <hr>
    <div>
        <h3>以下是评论区域</h3>
        <div id="replydiv">

        </div>
    </div>
    <hr>
    <form class="layui-form" id="addReplyForm" lay-filter="addReplyForm" action="" style="padding: 20px">

        <div class="layui-form-item">
            <label class="layui-form-label">昵称</label>
            <div class="layui-input-block">
                <input type="hidden" id="topicid" name="topicid" >
                <input type="text" id="author" name="author" required lay-verify="required" autocomplete="off"
                       placeholder="请输入标题"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">内容</label>
            <div class="layui-input-block">
                <input type="text" id="content" name="content" autocomplete="off"
                       placeholder="请输入内容"
                       class="layui-textarea">
            </div>
        </div>
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" id="addReply" lay-submit="" lay-filter="addReply">发表评论</button>
        </div>
    </form>
</div>

<script src="/resources/layui/layui.js"></script>
<script>
    var tableIns;
    layui.extend({
        dtree: '/resources/layui/layui-ext/dtree/dtree'
    }).use(['table', 'form', 'jquery', 'dtree'], function () {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;

        dtree = layui.dtree;
        //第一个实例
        tableIns = table.render({
            elem: '#menuTable'
            , height: 312
            , url: '/topic/loadAllTopicForTable' //数据接口
            , page: true //开启分页
            , toolbar: "#tableToolbar"
            , cols: [
                [ //表头
                    // {width: 80, type: 'checkbox'}
                    {field: 'topicid', title: 'ID', width: 80}
                    , {field: 'title', title: '标题', width: 200, event: 'click'}
                    , {field: 'author', title: '发帖人', width: 200}
                    , {field: 'createdate', title: '发帖时间', width: 300}
                    , {field: 'clickamount', title: '浏览量', width: 200}
                ]
            ]
        });
        //弹出层的index
        var layerindex;

        //添加修改公用弹出层的路径
        var addFormUrl;


//监听事件
        table.on('toolbar(menuTable)', function (obj) {
            // var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':
                    addMenu();
                    break;
                // case 'batchDelete':
                //     layer.msg('批量删除');
                //     var checkStatus = table.checkStatus('menuTable')
                //         , data = checkStatus.data;
                //
                //     layer.alert(JSON.stringify(data));
                //
                //     break;
            }
            ;
        });


        table.on('tool(menuTable)', function (obj) {
            var checkStatus = table.checkStatus(obj.data.id);

            switch (obj.event) {
                case 'update':
                    updateMenu(obj);
                    break;
                case 'delete':
                    deleteMenu(obj);
                    break;
                case 'click':
                    openTopic(obj);
                    break;
            }
            ;
        });

        /**
         *
         * 看帖
         */
        var topicid;
        function openTopic(obj) {
            // console.log(obj.data.topicid)
             topicid = obj.data.topicid;
            $("#topicid").val(topicid)
            layer.open({
                title: '看帖',
                type: 1,
                area: ['700px', '600px'],
                content: $('#lookTopic'),
                success: function (layero, index) {
                    $.post("/topic/loadTopicByTopicid", {topicid: topicid}, function (obj) {
                        var d = obj;
                        console.log(d)
                        var html = d.author + " " + d.title + " " + d.createdate + " " + d.clickamount
                        $("#h1look").html(html);
                        $("#spancontent").html(d.content)
                    })
                    $.post("/topic/addCilck", {topicid: topicid}, function (obj) {

                    })
                    $.post("/reply/loadReplyByTopicid", {topicid: topicid}, function (obj) {
                        var replys = obj.data;
                        var replyhtml;
                        for (var i = 0; i < replys.length; i++) {
                            var reply = replys[i];
                            // console.log(reply)
                            replyhtml += "<br>";
                            replyhtml += "<b>昵称:</b><span>" + reply.author + "</span><span>时间</span><span>" + reply.createdate + "</span>";
                            replyhtml += "<br>";
                            replyhtml += "<span>" + reply.content + "</span>";
                            replyhtml += "<br>";
                            replyhtml += "  <span>=========================================================</span>";
                        }
                        $("#replydiv").html(replyhtml)
                    })
                }
            });
        }
        function openTopicBytopicid(data) {
            // console.log(obj.data.topicid)
             topicid = data;
            $("#topicid").val(topicid)
            layer.open({
                title: '看帖',
                type: 1,
                area: ['700px', '600px'],
                content: $('#lookTopic'),
                success: function (layero, index) {
                    $.post("/topic/loadTopicByTopicid", {topicid: topicid}, function (obj) {
                        var d = obj;
                        console.log(d)
                        var html = d.author + " " + d.title + " " + d.createdate + " " + d.clickamount
                        $("#h1look").html(html);
                        $("#spancontent").html(d.content)
                    })
                    $.post("/topic/addCilck", {topicid: topicid}, function (obj) {

                    })
                    $.post("/reply/loadReplyByTopicid", {topicid: topicid}, function (obj) {
                        var replys = obj.data;
                        var replyhtml;
                        for (var i = 0; i < replys.length; i++) {
                            var reply = replys[i];
                            // console.log(reply)
                            replyhtml += "<br>";
                            replyhtml += "<b>昵称:</b><span>" + reply.author + "</span><span>时间</span><span>" + reply.createdate + "</span>";
                            replyhtml += "<br>";
                            replyhtml += "<span>" + reply.content + "</span>";
                            replyhtml += "<br>";
                            replyhtml += "  <span>=========================================================</span>";
                        }
                        $("#replydiv").html(replyhtml)
                    })
                }
            });
        }

        /**
         *
         * 添加
         */
        function addMenu() {
            layer.msg('添加');
            layer.open({
                title: '发帖',
                type: 1,
                area: ['500px', '400px'],
                content: $('#addForm'),
                success: function (layero, index) {
                    //清空表单里面的数据
                    $("#addForm")[0].reset();
                    // 使下拉框为不弹出状态
                    addFormUrl = "/topic/addTopic";
                }
            });
        }

        /**
         * 修改图书信息
         * @param obj
         */
        function updateMenu(obj) {
            layer.open({
                title: '修改图书信息',
                type: 1,
                area: ['500px', '400px'],
                content: $('#addForm'),
                success: function (layero, index) {
                    //清空表单里面的数据
                    $("#addForm")[0].reset();
                    //装载默认数据

                    form.val("addForm", obj.data);

                    form.val("addForm", {open: obj.data.open + ""});
                    form.val("addForm", {available: obj.data.available + ""});

                    layerindex = index;
                    addFormUrl = "/topic/updateTopic";
                }
            });
        }



        //监控添加提交事件
        form.on("submit(release)", function (data) {
            var params = $("#addForm").serialize();
            var pid = $("#pid").val();
            $.post(addFormUrl, params, function (data) {
                layer.msg(data.msg);
            });

            //重置添加表单
            $("#addForm")[0].reset();
            //刷新表格 左侧树 弹出层表格
            // tableIns.reload();
            //刷新表格
            $("#doReset").click();
            layer.close(layerindex);
        });

        //监控添加提交事件
        form.on("submit(addReply)", function (data) {
            var params = $("#addReplyForm").serialize();
            // console.log(params)
            $.post("/reply/addReply", params, function (data) {
                layer.msg(data.msg);
            });
            layer.close(layerindex);
            var val = $("#topicid").val();
            //重新打开
            console.log(val)
            openTopicBytopicid(val);
        });

        $("#cancel").click(function () {
            $("#addForm")[0].reset();
            $(this).removeClass("layui-form-selected");
            $("#test").removeClass("layui-show layui-anim layui-anim-upbit");
            layer.close(layerindex)
            //清空pid内容
            $("#pid").val("");
        })

        //监听查询事件
        form.on("submit(doSearch)", function (data) {
            var params = $("#searchFrm").serialize();
            tableIns.reload({
                url: '/menu/loadAllMenuForTable?' + params
                , where: {
                    page: 1
                }
            })
            //刷新表格
            return false;
        });
        //监控重置事件
        $("#doReset").click(function () {
            tableIns.reload({
                url: '/menu/loadAllMenuForTable?'
                // ,where:{
                //     page:1
                // }
            })
            //刷新表格
            return false;
        });

    });

    function reloadTable(menuid) {
        tableIns.reload({
            url: '/menu/loadAllMenuForTable?id=' + menuid,
            // where:{
            //     page:1
            // }
        })
    }
</script>
</body>

</html>